<template>
  <div class="lottery-wheel">
    <div class="turntable_wp">
      <img
        src="@/static/s-dial_bg.png"
        class="turntable"
        :style="
          '-webkit-transform:rotate(' +
          deg +
          'deg) translateZ(0);transform:rotate(' +
          deg +
          'deg) translateZ(0)'
        "
      />
      <img @tap="start" class="pointer" src="@/static/s-dial_pointer.png" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, onBeforeMount } from "vue";

const deg = ref(0);
const singleAngle = ref("");
const isStart = ref();
const timer = ref();
const speed = ref(16);

const start = () => {
  if (!isStart.value) {
    begin(3);
  }
};

const begin = (awardNumer) => {
  let degs = deg.value;
  let singleAngle2 = singleAngle.value;
  let speed2 = speed.value;
  isStart.value = true;
  let endAddAngle = 0;
  endAddAngle = 360 - ((awardNumer - 1) * singleAngle2 + singleAngle2 / 2); // 中奖角度
  const rangeAngle = (Math.floor(Math.random() * 4) + 4) * 360; // 随机旋转几圈再停止

  console.log(endAddAngle);
  let cAngle = "";
  degs = 0;
  timer.value = setInterval(() => {
    if (degs < rangeAngle) {
      degs += speed2;
    } else {
      cAngle = (endAddAngle + rangeAngle - degs) / speed2;
      cAngle = cAngle > speed2 ? speed2 : cAngle < 1 ? 1 : cAngle;
      degs += cAngle;

      if (degs >= endAddAngle + rangeAngle) {
        degs = endAddAngle + rangeAngle;
        isStart.value = false;
        clearInterval(timer.value);
        // this.$emit('success');
      }
    }

    deg.value = degs;
  }, 1000 / 60);
};
onBeforeMount(() => {
  singleAngle.value = 360 / 10;
});
</script>

<style scoped>
.turntable_wp {
  width: 300px;
  height: 300px;
  position: relative;
  margin: 0 auto;
}
.turntable {
  width: 300px !important;
  height: 300px !important;
}
.pointer {
  position: absolute;
  width: 100px !important;
  height: 100px !important;
  top: 33%;
  left: 33%;
}

.lottery-wheel {
  width: 100%;
  height: 100vh;
  background: palegreen;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>